<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 90vw;
            height: 90vh;
            background-color: #eeeeee;
        }
    </style>
</head>

<body>
    <div id="canvas-frame"></div>

    <!-- <script type="importmap">
        {
            "imports": {
                "three": "../build/three.module.js",
                "three/addons/": "./jsm/"
            }
        }
    </script> -->

    <script>

        // import * as THREE from 'three';

        // import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        // 创建 renderer 变量用于存储渲染器对象
        var renderer;
        // initThree 函数用来初始化 Three.js 运行所需的环境
        function initThree() {
            // 同原生 WebGL 环境搭建过程一样，Three.js 也需要先设置画布 canvas 元素的大小
            width = document.getElementById("canvas-frame").clientWidth; // 设置宽度属性为浏览器窗口宽度
            height = document.getElementById("canvas-frame").clientHeight; // 设置高度属性为浏览器窗口高度
            // 新建一个 WebGL 渲染器并赋值给 renderer 变量
            renderer = new THREE.WebGLRenderer({
                antialias: true,
            });
            // 设置画布大小为浏览器窗口大小
            renderer.setSize(width, height);
            // 将画布元素挂载到页面
            document
                .getElementById("canvas-frame")
                .appendChild(renderer.domElement);
            // 设置清空画布的颜色为白色
            renderer.setClearColor("#ccc", 1.0);
        }

        // 创建 camera 变量用于存储相机对象
        var camera;
        // 初始化相机函数 Three.js 中相机的类型有好几种可以根据具体需要进行选择这里我们要创建的是一个旋转的立方体所以采用的是透视相机，而如果需要创建 3D 阴影效果的场景则需要使用正交相机
        function initCamera() {
            /* 
        创建透一个视相机的实例语法 PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) 
        fov - 视角
        aspect - 物体的长宽比
        near - 相机近点截图
        far - 相机远点截图
      */
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
            camera.position.x = 15; // 设置相机在三维空间坐标中 x 轴的位置
            camera.position.y =15; // 设置相机在三维空间坐标中 y 轴的位置
            camera.position.z = 15; // 设置相机在三维空间坐标中 z 轴的位置
            camera.up.x = 0;
            camera.up.y = 0;
            camera.up.z = 1;  // // 设置向上方向为 Z 轴正方向
            camera.lookAt(0,0,0); // 设置相机的观察点
        }
        // 创建 scene 变量用于存储场景对象
        var scene;
        // initScene 函数创建一个场景并赋值给 scene 变量
        function initScene() {
            scene = new THREE.Scene();
            // 创建辅助观察坐标系
            const asesHelper = new THREE.AxesHelper(100);
            scene.add(asesHelper);
        }



        // 创建一个 cube 变量用于存放几何立方体
        var cube;

        // initObject 函数就是我们创建场景的核心了
        function initObject() {
            // 首先创建一个一个几何类的实例并赋值给 geometry 变量
            var geometry = new THREE.BoxGeometry(5, 5, 5);
            // 然后创建一种材质的实例 MeshBasicMaterial 材质的构造函数能够创建一种简单的不受场景灯光效果影响的材质
            var material = new THREE.MeshBasicMaterial({
                color: 0x00ff00,
                transparent:true,//开启透明
                opacity:0.5,//设置透明度
            });
            // Mesh 是一种三角形网格基本单元的构造函数，类似于我们原生 WebGL 中的片元着色器它用于连接几何体和材质
            cube = new THREE.Mesh(geometry, material);
            cube.position.x = 3;
            cube.position.y = 3;
            cube.position.z = 3;
            // 最后将创建好的几何立方体添加到场景中
            scene.add(cube);
        }
        // render 函数提供了浏览器的循环渲染功能
        function render() {
            cube.rotation.x += 0.01;
            // cube.rotation.y += 0.01;
            // cube.rotation.z += 0.01;
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        // 最后将 Threee.js 环境初始化，场景创建，相机创建渲染器创建以及渲染初始化等函数合成到一起执行我们就完成了一个旋转立方体的绘制
        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initObject();

            render();
        }
        document.addEventListener("DOMContentLoaded", function () {
            threeStart();
        });
    </script>
</body>

</html>